<template>
  <div class="process-container">
    <h2 class="section-title">影视制作全流程</h2>
    <el-timeline>
      <el-timeline-item
          v-for="(step, index) in productionProcess"
          :key="index"
          :timestamp="step.time"
          placement="top"
      >
        <el-card>
          <h4>{{ step.title }}</h4>
          <p>{{ step.content }}</p>
          <div class="step-tags">
            <el-tag
                v-for="(tag, i) in step.tags"
                :key="i"
                :type="tagTypes[i % tagTypes.length]"
                size="small"
            >
              {{ tag }}
            </el-tag>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
const tagTypes = ['', 'success', 'info', 'warning', 'danger']

const productionProcess = [
  {
    time: '前期策划',
    title: '创意孵化阶段',
    content: '包括剧本创作、项目立项、预算评估、团队组建等核心筹备工作',
    tags: ['剧本开发', '项目策划', '资金筹备']
  },
  {
    time: '中期拍摄',
    title: '制作执行阶段',
    content: '现场拍摄、演员调度、场景搭建、设备调试等实际制作过程',
    tags: ['现场拍摄', '设备租赁', '艺人协调']
  },
  {
    time: '后期制作',
    title: '精加工阶段',
    content: '剪辑、特效、配音、调色等后期处理，确保成片质量',
    tags: ['视频剪辑', '特效合成', '音频处理']
  },
  {
    time: '宣发运营',
    title: '市场推广阶段',
    content: '媒体宣传、发行渠道拓展、版权运营等市场化操作',
    tags: ['媒体推广', '版权运营', 'IP衍生']
  }
]
</script>

<style scoped>
/* 基础视口设置 */
.process-container {
  padding: 20px 16px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 响应式标题 */
.section-title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #333;
  font-weight: 600;
}

/* 时间线适配 */
.el-timeline {
  padding-left: 8px;
}

.el-timeline-item {
  margin-bottom: 1.5rem;
}

.el-timeline-item__timestamp {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0.5rem;
}

/* 卡片样式优化 */
.el-card {
  margin: 0 0 1rem 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-card :deep(.el-card__body) {
  padding: 16px;
}

.el-card h4 {
  font-size: 1.1rem;
  margin: 0 0 8px 0;
  color: #222;
}

.el-card p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.5;
  margin: 0 0 12px 0;
}

/* 标签样式 */
.step-tags {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.step-tags .el-tag {
  margin-right: 0;
  font-size: 0.75rem;
  padding: 0 8px;
  height: 24px;
  line-height: 24px;
}

/* 媒体查询适配不同屏幕尺寸 */
@media (max-width: 480px) {
  .section-title {
    font-size: 1.3rem;
  }

  .el-timeline-item__timestamp {
    font-size: 0.8rem;
  }

  .el-card h4 {
    font-size: 1rem;
  }

  .el-card p {
    font-size: 0.85rem;
  }

  .step-tags .el-tag {
    font-size: 0.7rem;
    padding: 0 6px;
    height: 22px;
    line-height: 22px;
  }
}

@media (min-width: 768px) {
  .process-container {
    max-width: 90%;
    padding: 30px 20px;
  }
}

@media (min-width: 992px) {
  .process-container {
    max-width: 800px;
  }
}
</style>
